<template>
  <div class="home">
     <!-- 头部 -->
     <van-nav-bar
        title="商品列表"
        left-arrow
        />
        <!-- 导航 -->
        <ul class="nav">
            <li v-for="item,index in tabList" :class="{active:currentId==item.id}" :key="item.id" @click="change(item.id)">{{item.label}}</li>
        </ul>
        <!-- 商品列表 -->
        <van-card
             v-for="item,index in filterList"
             :key="item._id"
            :price="item.price"
            :desc="`${item.old_price}人付款`"
            :title="item.title"
            :thumb="item.pic"
            >
             <template #footer>
                <van-button size="mini" color="#44107d" @click="addCart(item)">+</van-button>  
            </template>
            </van-card>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'HomeView',
  data() {
    return {
        tabList: [
        {
          id: "59f1e1ada1da8b15d42234e9",
          label: "推荐"
        },
        {
          id: "59f1e1e880e7ed050cec999d",
          label: "母婴"
        },
        {
          id: "5a0424b8010e711234661437",
          label: "鞋包"
        },
        {
          id: "59f1e4659bfd8f3bd030eed3",
          label: "食品"
        },
        {
          id: "59f1e47e9bfd8f3bd030eed5",
          label: "数码"
        }
      ],
      currentId:'59f1e1ada1da8b15d42234e9',
      allList:[],//存放所有的商品
    }
  },
  created() {
    this.getList()
  },
  methods: {
    change(id){
      this.currentId = id
    },
    getList(){
        this.$axios.get('list.json').then(res=>{
            console.log(res);
            this.allList = res.data.result
        })
    },
    addCart(item){
       this.$store.commit('addCart',item)
       this.$router.push('/about')
    }
  },
//   计算属性做筛选
computed:{
   filterList(){
      return  this.allList.filter(item=>item.cid == this.currentId)
   }
},
  components: {
    // HelloWorld
  }
}
</script>
<style lang="scss" scoped>
.nav{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-around;
    background: #44107d;
    color:#fff;
    li{
        flex:1;
        height: 100%;
        line-height: 50px;
    }
    .active{
        background: #bfa0dd!important;
    }
}
</style>

